import React, { Component } from 'react';
import styles from './tree.less'
import PropTypes from 'prop-types'
import play from '@/assets/play.svg'
import { formatSeconds } from '@/utils/utils'

class Tree extends Component {
  constructor(props){
    super(props)
    this.treeItemCroup =this.treeItemCroup.bind(this);
    this.state ={
      openList : false
    }
  }

  itemTitle(item, key){
    return (
      <>
        <span>{item.title}</span>
        <div>{formatSeconds(item.duration)}</div>
      </>
    )
  }

  treeItemCroup(itemGroup) {
    let itemGroupItem = []
    itemGroupItem.push(
      <ul key={1}>
        {this.tree(itemGroup.child)}
      </ul>
    )
    return itemGroupItem
  }

  tree(child){
    const { clickTree } = this.props
    let treeItem
    if(child){
      treeItem = child.map((item, key) => {
        let itemStyle = {
          paddingLeft: 20 * parseInt(item.level.slice(5), 10)+'px'
        }
        return (
          <li className={styles[`${item.level}`]} key={key} style={itemStyle} onClick={clickTree.bind(null, item.id)}>
            <i aria-hidden="true">
              <img src={play} style={{marginRight: 10, transform: ['translateY(-1px)']}}/>
            </i>
            {this.itemTitle(item, key)}
          </li>
        )
      })
    }
    return treeItem
  }

  render() {
    const {detailTree = false} = this.props
    return (
      <div className={detailTree ? styles.detailTree : styles.tree}>
        { this.treeItemCroup(this.props.treeList) }
      </div>
    );
  }
}

Tree.propTypes = {
  clickTree: PropTypes.func
}

Tree.defaultProps = {
  clickTree: () => {}
}

export default Tree;